<template>
	<view>
		<template v-for="(item,index) in list" :key="index">
			<template v-if="value.includes(item.value)">
				<template v-if="item.children">
					<picker @change="bindPickerChange($event,item,index)" :value="pickerValue" :range="array">
						<view class="flex flex-y-center flex-x-space-between mt-12 px-12 py-17 rounded-8 bg-white">
							<view class="flex flex-y-center">
								<view class="rounded-circle w-7 h-7 bg-blue-1"></view>
								<text class="fs-16 ml-6">{{item.label}}</text>
							</view>

							<view class="flex">
								<text class="fs-14 text-grey-4 mr-2">点击切换</text>
								<uv-icon name='arrow-right' color="#B9B9B9"></uv-icon>
							</view>
						</view>
					</picker>
					<y-list :list="item.children" v-if="item.children" :value="value"></y-list>
				</template>
			</template>

			<view class="mx-50 mt-10" v-else>
				<button v-if="item.pid==value[value.length - 1]&&!item.children"
					class="w-p-100 py-2 bg-blue-1 text-white fw-600 fs-16 box-sizing rounded-12 flex flex-center"
					@tap="$page.open('/pages/topic/topic?type=1&category_id=' + item.value)">{{item.label}}</button>
			</view>
		</template>
	</view>
</template>

<script setup>
	import { defineProps, ref, watch } from 'vue'
	import { $page } from '@/utils';
	const props = defineProps({
		list: {
			default: [],
			type: Array,
		},
		value: {
			default: [],
			type: Array
		}
	})
	//监听数组改变
	watch(() => props.value, (val) => {
		value.value = val
	})
	//列表改变
	watch(() => props.list, (val) => {
		array.value = val.map(item => item.label)
	})
	//选择数组
	const array = ref(props.list.map(item => item.label));
	//picker 下标
	const pickerValue = ref(0);
	//赋值
	const value = ref(props.value)
	//临时数组
	const temp = ref([])
	//切换分类
	const bindPickerChange = (e, item, index) => {
		const i = value.value.indexOf(item.pid);
		if (i > 0) {
			value.value.splice(i + 1, value.value.length - i)
		} else {
			value.value = [];
		}
		const find = props.list[e.detail.value];
		if (find.children) {
			value.value.push(find.value)
		}
		if (find.children) {
			recursion(find.children[0]);
		}
	}
	const recursion = (val) => {
		if (val['children']) {
			value.value.push(val['value'])
			recursion(val['children'][0])
		}
	}
</script>

<style>
</style>